<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<style type="text/css">
			.basic{
				width: 100;
				height: 100;
				background-color: #FFE4C4;
			}
			.normal{
				width: 100;
				height: 100;
				background-color: #FF0000;
			}
			.happy{
				width: 100;
				height: 100;
				background-color: aqua;
			}
			.sad{
				width: 100;
				height: 100;
				background-color: saddlebrown;
			}
			.aggt1{
				background-color: dodgerblue;
			}
			.aggt2{
				background-color: bisque;
			}
		</style>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
			1．class样式
					写法：class="xxx" xxx可以是字符串、对象、数组。
					字符串写法适用于：类名不确定，要动态获取。
					对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
					数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
			2．style样式
					:style="{fontSize：xxx}"其中xxx是动态值。
				:style="[a,b]"其中a、b是样式对象。
		 -->
		<!-- 创建容器 -->
		<div id="root">
			<!-- 绑定class样式-字符串写法,适用于样式类名不确定，需要动态指定 -->
			<div id="" class="basic" :class="mood" @click="changemood">text1</div>
			<br/>
			<!-- 绑定class样式-数组写法,适用于样式类名不确定，个数也不确定,需要动态指定 -->
			<div id="" class="basic" :class="mood" @click="changemood">text2</div>
			<br/>
			<!-- 绑定class样式-对象写法,适用于样式个数确定，名字确定，但是否使用-->
			<div id="" class="basic" :class="classObj">text3</div>
			<br>
			<!-- 绑定style样式-对象写法 -->
			<div id="" class="basic" :style="styleObj1">text4</div>
			<br>
			<!-- 绑定style样式-数组写法 -->
			<div id="" class="basic" :style="[styleObj1,styleObj2]">text5</div>
			<br>
			<!-- 绑定style样式-数组写法 -->
			<div id="" class="basic" :style="styleArr">text5</div>
			<br>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			
			//创建vue实例
			new Vue({
				el:'#root',
				data:{
					name:'上硅谷',
					mood:'normal',
					arr:['happy','normal','sad'],
					classObj:{
						aggt1:true,
						aggt2:false
					},
					styleObj1:{
						fontSize:'50px',
						backgroundColor:'red',
						
					},
					styleObj2:{
						backgroundColor:'white',
						color:'blue'
					},
					styleArr:[
						{
							fontSize:'50px',
							backgroundColor:'red',
						},
						{
							backgroundColor:'white',
							color:'blue'
						},
					]
				},
				methods:{
					changemood(){
						const arr=['happy','normal','sad']
						x=Math.floor(Math.random()*3)
						this.mood=arr[x]
					}
				}
			})
		</script>
	</body>
</html>
